<template>
  <div class="flex">
    <div class="bigbox" v-for="(item, index) in imgList" :key="index">
      <!-- :preview-src-list="[item]" -->
      <el-image class="img" v-on:click="utilPreviewImage(item)" :src="item" ></el-image>
      <i class="el-icon-remove cursor delIcon" style="font-size:18px;cursor:pointer"
        @click="imgdelete(item, index)"></i>
      <!-- <div class="iconX">
        <div class="iii">
          <i
            class="el-icon-view cursor"
            style="font-size:18px"
            v-on:click="preview(item)"></i>
          <i
            class="el-icon-delete cursor"
            style="font-size:18px"
            @click="imgdelete(item, index)"
          ></i>
        </div>
      </div> -->
    </div>
    <div class="imgText" v-if="imgList&&imgList.length<limit">
      <!-- accept="image/*" -->
      <!-- accept="image/jpeg, image/jpg, image/png" -->
      <img src="./../assets/image/7.png" v-on:click="click" style="width:250px;cursor:pointer" alt="">
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/jpeg/png文件，且不超过200KB'</div>
      <el-upload action :before-upload="onBeforeUploadImage" style="visibility:hidden;width:1px;height:1px"
        :on-change="handleChange" :on-exceed="handleExceed" :http-request="uploadFile" ref="upload" class="upload-demo"
        accept="image/*" :show-file-list="false" list-type="picture-card" :multiple='isMultiple' :limit='limit'>
        <!-- <el-button
          type="success"
          size="small"
          plain
          style="width: 150px; height: 150px; border-radius: 20px; border: 1px dashed">
          <i class="el-icon-plus"></i>
        </el-button> -->
        <el-button type="primary" :loading='loading'>
          {{loading==false?'点击上传':'上传中'}}</el-button>
        <div slot="tip" class="el-upload__tip">
        只能上传jpg/jpeg/png文件，且不超过2MB建议图片比例4:3</div>
       
      </el-upload>
    </div>
  </div>
</template>
<script>
export default {
  name: "elUploadImage",
  data() {
    return {
      loading: false,
      previewImgUrl: [],
      fileList: [],
      imgList: this.imageList,
    };
  },
  props: {
    isMultiple: {
      type: Boolean,
      default() {
        return false;
      },
    },
    limit: {
      type: Number,
      default() {
        return 1;
      },
    },
    imageList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    imageList: {
      handler(value) {
        // console.log(value, "gaaaaa")
        this.imgList = value;
        this.$forceUpdate();
      },
      deep: true,
    },
  },
  methods: {
    click() {
      this.$refs["upload"].$refs["upload-inner"].handleClick();
    },
    utilPreviewImage(item) {
      this.$ddapi.utilPreviewImage(this.imgList, item)
    },
    handleExceed(files, fileList) {
      let count = this.imgList.length - this.limit;
      if (files.length + this.imgList.length > count) {
        this.$message.warning(
          `当前限制选择 ${this.limit} 个文件，本次最多能选择 ${count} 个文件`
        );
      }
    },
    preview(item) {
      this.previewImgUrl = [item];
    },
    onBeforeUploadImage(file) {
      const isIMAGE = file.type === "image/jpeg" || "image/jpg" || "image/png";
      const isLt1M = file.size / 1024 < 1000;
      if (!isIMAGE) {
        this.$message.error("上传文件只能是图片格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片不能超过 200KB!");
      }
      return isIMAGE && isLt1M;
    },
    // 上传文件，获取文件流
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    uploadFile() {
      let t = this;
      let form = new FormData();
      this.fileList.map((item) => {
        form.append("file", item.raw);
      });
      // 后端接受参数 ，可以接受多个参数
      if (this.imgList.length > this.limit) {
        this.$message.error(`最多上传${this.limit}张图片`);
      } else {
        this.loading = true;
        this.$http.post("http://139.215.190.237:8081/api/management/addNews/uploadfile", form).then((res) => {
          console.log(res.data, "上传封面的结果")
          this.loading = false
          if (res.data.status ==100) {
            let imgList = this.imgList;
            if (imgList.length < this.limit) {
              this.imgList = [res.data.data];
              this.$emit("callbackImg", this.imgList);
            } else {
              t.$message.error(`最多上传${this.limit}张图片`);
              return false;
            }
            this.$forceUpdate();
            this.$emit("callbackImg", this.imgList);
            this.$refs["upload"].clearFiles();
          } else {
            this.$message.error(res.data.errMsg)
          }
        }, error => {
          this.loading = false
          this.$message.error('上传失败')
          this.$refs["upload"].clearFiles();
        });
      }
    },
    //
    async imgdelete(item, i) {
      let res = await this.$publicJS.delConfirm('确定要删除吗?');
      if (res) {
        this.imgList.splice(i, 1);
        this.$emit("callbackImg", this.imgList);
        this.$forceUpdate();
      }
    },
  },
};
</script>
<style lang="css" scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
}
.bigbox {
  width: 250px;
  height: 150px;
  position: relative;
  overflow: hidden;
  margin-right: 10px;
  margin-bottom: 10px;
}
.img {
  width: 250px;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
}
.bigbox:hover .iconX {
  /* display: block; */
}
.iconX {
  background: aliceblue;
  width: 250px;
  height: 150px;
  font-weight: 900;
  display: none;
  opacity: 0.7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.iii {
  position: absolute;
  color: #000;
  font-weight: 900;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.delIcon {
  position: absolute;
  color: #e65770;
  font-weight: 900;
  top: 1%;
  right: 2%;
}
.upload-demo >>> .el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
  /* border: none; */
  width: 60px;
  height: 70px;
  margin-left: 0px;
}
.demo-ruleForm >>> input {
  width: 400px;
}
.right_ >>> .upload-demo {
  margin-left: 0px;
}
.upload-demo >>> .el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
  /* border: none; */
  width: 150px;
  height: 155px;
  margin-left: 0px;
}
</style>